<template>

  <div>
      <div class="title" v-if="iflist">查看详情</div>
    <van-nav-bar
      title="回复列表"
      left-text="返回"
      v-if="!iflist"
      right-text="刷新"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <div class="box">
      <van-row
        type="flex"
        justify="space-between"
        style="border-bottom: 1px solid #dcdfe6;padding: 0 20px;  background: #e8e8e8;"
      >
        <van-col
          :span="14"
          style="color: #faad14;"
        >
          {{list.type}}
        </van-col>
        <van-col
          :span="6"
          style="text-align: end;"
        >
          No:{{list.id}}
        </van-col>
      </van-row>
      <div class="content">
        <div class="first">

          <van-row class="row">
            类型:{{list.type}}
          </van-row>
          <van-row class="row">
            反馈人姓名:{{list.userName}}
          </van-row>
          <van-row class="row">
            反馈人联系方式:{{list.mobile}}
          </van-row>
          <van-row class="row">
            时间:{{list.createTime}}
          </van-row>
          <van-row
            class="row"
            v-if="list.type !='线上非授权销售投诉'"
          >
            {{list.type}}部门:{{list.deparmentName}}
          </van-row>
          <div v-if="list.type =='线上非授权销售投诉'">
            <van-row class="row">
              投诉平台:{{list.feedbackSystem}}
            </van-row>
            <van-row class="row">
              账号名称:{{list.informerCode}}
            </van-row>
            <van-row class="row">
              涉及品牌:{{list.brandName}}
            </van-row>

            <van-row class="row">
              首页截图:
            </van-row>
            <van-image
              width="80px"
              height="80px"
              :src="list.indexPic"
              @click="bigImg(list.indexPic)"
            />
            <van-row class="row">
              货源信息:
            </van-row>
            <van-image
              style="margin-right:7px"
              v-for="item,index in list.productInfoList"
              :key="index"
              width="80px"
              height="80px"
              :src="item"
              @click="bigImg(item)"
            />
            <van-row class="row">
              销售说明:{{list.minPriceInfo}}
            </van-row>
          </div>
           <van-row class="row" v-if="list.title">
            标题:{{list.title}}
          </van-row>
          <van-row class="row">
            内容:{{list.content}}
          </van-row>
        </div>

        <div class="next">

          <van-list>
            <van-cell
              v-for="item in list.feedBackReplyList"
              :key="item.id"
            >
              <van-row
                type="flex"
                justify="end"
                style="border-bottom: 1px solid #dcdfe6;margin-bottom: 10px;"
              >
                <van-col
                  :span="6"
                  style="color: #faad14;text-align: end;"
                >
                  No:{{item.id}}
                </van-col>
              </van-row>
              <van-row class="row2">
                时间:{{item.createTime}}
              </van-row>
              <van-row class="row2">
                处理部门:{{item.deparmentName}}
              </van-row>
              <van-row class="row2">

                <span v-if="item.rType == 'A'">
                  回复状态:受理人
                </span>
                <span v-if="item.rType == 'Q'">
                  回复状态:举报人
                </span>
              </van-row>
              <van-row
                class="row2"
                v-if="item.mainStatus"
              >
                <span v-if="item.mainStatus == 0">
                  受理状态:处理中
                </span>
                <span v-if="item.mainStatus == 1">
                  受理状态:已处理
                </span>
              </van-row>
              <van-row class="row2">
                回复内容:{{item.rcontent}}
              </van-row>
            </van-cell>
          </van-list>

        </div>
        <div
          class="form"
          v-if="showBack"
        >
          <van-form
            @submit="onSubmit"
          >
            <van-field
              name="switch"
              label="是否设为星标事件"
            >
              <template #input>
                <van-switch
                  v-model="switchChecked"
                  size="20"
                />
              </template>
            </van-field>

            <van-field
              v-model="rcontent"
              rows="4"
              @blur="onBlur"
              autosize
              label="回复内容"
              type="textarea"
              maxlength="500"
              placeholder="请输入回复内容"
              show-word-limit
            />
            <van-field
              name="申报人姓名"
              label="申报人姓名"
              :disabled="true"
              v-model="list.userName"
            />
            <van-field
              name="申报人手机号"
              label="申报人手机号"
              :disabled="true"
              v-model="list.mobile"
            />
            <van-field
              readonly
              clickable
              name="picker"
              :value="bm.name"
              label="处理部门"
              @blur="onBlur"
              placeholder="处理部门"
              @click="showBm = true"
            />

            <van-popup
              v-model="showBm"
              position="bottom"
            >
              <van-picker
                show-toolbar
                :columns="bms"
                value-key="name"
                @confirm="onConfirmBm"
                @cancel="showBm = false"
              />
            </van-popup>
            <van-field
              name="radio"
              label="受理状态"
              v-if="list.type == '线上非授权销售投诉'"
            >
              <template #input>
                <van-radio-group
                  v-model="radio"
                  direction="horizontal"
                >
                  <van-radio name="0">驳回</van-radio>
                  <van-radio name="1">补充</van-radio>
                  <van-radio name="2">受理</van-radio>

                </van-radio-group>
              </template>
            </van-field>
            <van-field
              name="mainStatus"
              label="处理状态"
            >
              <template #input>
                <van-radio-group
                  v-model="mainStatus"
                  direction="horizontal"
                >
                  <van-radio name="0">处理中</van-radio>
                  <van-radio name="1">已处理</van-radio>

                </van-radio-group>
              </template>
            </van-field>
            <van-field
              v-if="mainStatus == 1 && list.type == '线上非授权销售投诉'"
              v-model="integrate"
              label="反馈积分"
              @blur="onBlur"
              placeholder="请填写反馈积分"
            />
            <!-- <van-field
              v-if="list.type != '线上非授权销售投诉'"
              v-model="integrate"
              label="反馈积分"
              @blur="onBlur"
              placeholder="请填写反馈积分"
            /> -->
            <div style="margin: 16px;">
              <van-button
                round
                block
                type="info"
                native-type="submit"
              >提交</van-button>
            </div>
          </van-form>
        </div>
      </div>
    </div>
    <van-overlay
      :show="show"
      @click="show = false"
    >
      <div class="wrapper">
        <div class="block">
          <van-image
            width="90%"
            style="object-fit: scale-down;"
            :src="url"
            @click="show = false"
          />
        </div>
      </div>
    </van-overlay>

  </div>

</template>
<script>
import { Notify } from 'vant'
export default {
  data() {
    return {
      list: {},
      showBack: true,
      active: 0,
      typeList: ['咨询', '规章制度建议', '其他建议', '线上非授权销售投诉', '其他投诉', '举报'],
      loading: false,
      id: this.$route.query.id,
      finished: false,
      url: '',
      rcontent: '',
      iflist:this.$route.query.iflist,
      showBm: false,
      switchStatus: false,
      deparmentId: '',
      deparmentName: '',
      switchChecked: false,
      replyStatus: false,
      bms: [],
      bm: {},
      radio: '0',
      show: false,
      mainStatus: '0',
      integrate: ''
    }
  },
  computed: {
    linkId() {
      return localStorage.getItem('linkId')
    }
  },
  created: function () {
    document.title = '回复列表'
    this.loadData()
    this.loadBms()
    if(this.iflist){
      this.showBack = false
    }
  },
  methods: {
    onBlur() {
      window.scroll(0, 0)
    },
    onConfirmBm(value) {
      this.bm = value
      this.deparmentId = value.id
      this.deparmentName = value.name
      this.showBm = false
    },
    onClickLeft() {
      this.$router.go(-1)
    },
    onClickRight() {
      this.loadData()
    },
    bigImg(url) {
      this.show = true
      this.url = url
    },
    loadData() {
      this.loading = true
      const params = {
        id: this.id
      }
      try {
        this.$http({
          url: '/api/gateway/basemgt-feedback/feedback/getFeedbackReplyDetail',
          method: 'get',
          params: params
        }).then(data => {
          if (data.code == 200) {
            this.list = data.data
            this.list.feedBackReplyList.map(item => {
              if (item.mainStatus == 1) {
                this.showBack = false
              }
            })
            this.typeList.map((subitem, index) => {
              if (this.list.type == index + 1) {
                this.list.type = subitem
              }
            })
          } else {
            Notify({ type: 'warning', message: data.msg })
          }
        })
      } catch (error) {
      } finally {
        this.loading = false
      }
    },
    loadBms() {
      this.$http({
        url: '/api/gateway/basemgt-feedback/feedback/getDept',
        method: 'get'
      }).then(data => {
        if (data.code == 200) {
          this.bms = data.data
        } else {
          Notify({ type: 'warning', message: data.msg })
        }
      })
    },
    onSubmit(values) {
      if (!this.rcontent) {
        this.$toast('请输入回复内容')
      } else if (this.list.type == '线上非授权销售投诉' && this.mainStatus == 1 && !this.integrate) {
        this.$toast('请填写反馈积分')
      } else {
        const params = {
          linkId: this.linkId,
          rcontent: this.rcontent,
          deparmentName: this.deparmentName,
          deparmentId: this.deparmentId,
          fstart: values.switch ? 1 : 0,
          mainStatus: values.mainStatus,
          status: values.radio,
          mainId: this.id,
          integrate: this.integrate
        }
        console.log(params)
        this.$http({
          url: '/api/gateway/basemgt-feedback/feedback/reply',
          method: 'post',
          data: params
        }).then(data => {
          if (data.code == 200) {
            Notify({ type: 'success', message: '回复成功！' })
            this.onClickLeft()
          } else {
            Notify({ type: 'warning', message: data.msg })
          }
        })
      }
    }
  }
}
</script>
<style scoped>
.box {
  margin: 0 10px;

  border: 1px solid rgb(150 150 150 / 30%);
  margin-bottom: 20px;
}
.content {
  background: #fff;
}
.first {
  margin: 0 20px;
  padding-top: 20px;
}
.next {
  padding-top: 20px;
}
.bottom {
  padding-top: 20px;
}
.form {
  background: #e8e8e8;
  padding: 20px 0;
}
.row {
  padding-bottom: 5px;
  background: #fff;
}
.row2 {
  color: rgb(102, 194, 207);
  padding-bottom: 5px;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.title {
  text-align: center;
  padding: 10px;
  font-size: 18px;
  font-weight: 500;
}
</style>